<template>
	<view class="search">
		<toSafe :bgColor="'#fff'"></toSafe>
		<view class="searchInput">
			<view class="search-top">
				<view class="icon">
					<uni-icons type="left" size="30" @click="HandleReturn" style="margin-right: 20rpx;"></uni-icons>
				</view>
				<view class="title">故 障 报 修</view>
			</view>
			<!-- <view class="search_icons">
				<view class="icon">
					<uni-icons type="search" size="20" color="#797979"></uni-icons>
				</view>
				<input class="uni-input" focus v-model="keyword" placeholder="搜索" />
				<view @click="search" class="search">搜索</view>
			</view> -->
		</view>
		<up-tabs :list="tabList" @click="clickTabItem" :scrollable="false" lineColor="#325EF5" activeStyle="color:#000"
			inactiveStyle="opcity: 0.8"></up-tabs>
		<!-- <you-tabs :tabsList="tabList" :activeName="activeName" tabActiveColor="#325EF5" bottomLineColor="#325EF5"
			@tabClick="clickTabItem">
		</you-tabs> -->
		<!-- <Tasks :type='0' :innerHeight="'88vh'" :lists="dataList" :isLoading="isLoading" @getList="getList">
		</Tasks> -->
		<scroll-view scroll-y style="height: calc(100vh - 88rpx)" class="list-box" @scrolltolower="loadMore">
			<view v-for="(item,index) in itemLists" :key="index" class="list-item">
				<view>
					<text>{{item.createTime}}</text>
					<text class="status" :style="{color:item.status===5?'#049c37':item.status===4?'#FF8A00':'#325ef5'}">
						{{getStatusLabel(item.status)}}
					</text>
				</view>
				<text class="title">{{item.ownerCompanyName}}</text>
				<text class="describe">{{item.address}}</text>
				<view>
					<text>预约上门时间：</text>
					<text>{{item.subscribeDate}}</text>
				</view>
				<text class="title">{{item.applyerName}}</text>
				<text class="describe">{{item.remark}}</text>
				<scroll-view scroll-x class="imgs" style="width: 100%;">
					<view v-if="item.photo && item.photo != ''"
						:style="{width: 112 * item.photo.split(',').length + 'rpx'}">
						<image v-for="(items,indexs) in item.photo.split(',')" :key="indexs" :src="baseUrl+items"
							mode="widthFix" @click="itemSrcFun(baseUrl+items)"></image>
					</view>
				</scroll-view>
				<view class="submit">
					<button class="cancel" style="opacity: .5;" disabled v-if="item.status===4">已提交结算单</button>
					<button class="confirm" v-if="item.status===3" @click.stop="affirmOrder(item, 4)">提交结算单</button>
					<button class="cancel" v-if="item.status===2" @click.stop="updateTime(item)">修改上门时间</button>
					<button class="confirm" v-if="item.status===2" @click.stop="affirmOrder(item, 3)">我已到达</button>
					<button class="confirm" v-if="item.status == 1 || !item.status"
						@click.stop="affirmOrder(item, 2)">确认接单</button>
				</view>
			</view>
			<view class="list_loading" v-if="isAllData != '0'">
				<view class="loading" v-if="isAllData == '1'">
					正在加载，请稍候
					<uni-icons type="spinner-cycle" size="16" style="margin-left: 4px;"></uni-icons>
				</view>
				<view class="all-data" v-else>已加载全部数据~</view>
			</view>
		</scroll-view>

		<!-- <u-datetime-picker :show="isShowTime" v-model="timeValue" mode="datetime" :minDate="Number(new Date())"
			@cancel="isShowTime = false" @confirm="selectTimeConfirm"></u-datetime-picker> -->
		<up-datetime-picker :show="isShowTime" v-model="timeValue" mode="datetime" :closeOnClickOverlay="true"
			:minDate="Number(new Date())" @confirm="selectTimeConfirm" @cancel="isShowTime = false">
		</up-datetime-picker>
		<u-popup :show="isShowImage" mode="center" @close="close">
			<image :src="itemSrc" mode=""></image>
		</u-popup>

	</view>
</template>

<script setup>
	import {
		getRepairList
	} from '@/api/fault.js'
	import toSafe from '@/compoents/top-safe.vue'
	import {
		onMounted,
		ref,
		reactive,
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	// import {
	// 	timestampToDate
	// } from '@/utils/index.js'
	import pageConfig from '@/config.js'
	import {
		getMasterOrderList,
		updateMasterOrderStatus
	} from "@/api/home.js"
	const baseUrl = ref(pageConfig.baseUrl)
	const itemLists = ref([])
	let tabList = reactive([{
			name: '待接单',
			id: 1
		},
		{
			name: '待开始',
			id: 2
		},
		{
			name: '进行中',
			id: 3
		},
		// {
		// 	name: '待支付',
		// 	id: 4
		// },
		{
			name: '已完成',
			id: 5
		},
	])
	let activeName = ref(1)
	let total = ref(0)
	let pageInfo = ref({
		pageNum: 1,
		pageSize: 10
	})
	let isAllData = ref('0')
	let timeValue = ref(Number(new Date()))
	let isShowTime = ref(false)
	let defalutRow = reactive({})
	let dataList = reactive([])
	let isLoading = ref(false)
	onShow(() => {
		total.value = 0
		Object.assign(pageInfo, {
			pageNum: 1,
			pageSize: 10
		})
		itemLists.value.splice(0, itemLists.value.length)
		listChange()
	})
	onMounted(() => {
		getList()
	})
	const getList = () => {
		isLoading.value = true
		getRepairList().then(res => {
			if (res.code == 200) {
				dataList.splice(0, dataList.length, ...res.rows)
			}
			isLoading.value = false
		})
	}

	function getStatusLabel(status) {
		let index = tabList.findIndex(ele => ele.id == status);
		return index > -1 ? tabList[index].name : '';
	}

	function timestampToDate(timestamp, type = 'ys') {
		// 创建一个新的Date对象，直接使用时间戳
		var date;
		if (!timestamp || timestamp == '') {
			date = new Date();
		} else if (typeof timestamp == 'number') {
			date = new Date(timestamp);
		} else {
			date = new Date(timestamp.replace(/-/g, '/'));
		}

		// 获取年月日时分秒，并格式化为两位数字
		var year = date.getFullYear();
		var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
		var day = ('0' + date.getDate()).slice(-2);
		var hours = ('0' + date.getHours()).slice(-2);
		var minutes = ('0' + date.getMinutes()).slice(-2);
		var seconds = ('0' + date.getSeconds()).slice(-2);
		if (type == 'ymd') {
			return `${year}-${month}-${day}`
		} else if (type == 'ymdhm') {
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		}

		// 拼接字符串返回
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}

	//切换tab
	function clickTabItem(value) {
		console.log(value, 'value');
		total.value = 0;
		Object.assign(pageInfo, {
			pageNum: 1,
			pageSize: 10
		})
		itemLists.value.splice(0, itemLists.value.length)
		activeName.value = value.id;
		listChange();
	}

	async function listChange() {
		isAllData.value = '1';
		let res = await getMasterOrderList({
			orderStatus: activeName.value,
			...pageInfo
		});
		let list = res.rows;
		if (pageInfo.pageNum == 1) {
			itemLists.value = res.rows.map(ele => {
				return {
					...ele.wbRepairApply,
					id: ele.id,
					repairId: ele.wbRepairApply && ele.wbRepairApply.id || null,
				}
			})
		} else {
			itemLists.value.push(...list.map(ele => {
				return {
					...ele.wbRepairApply,
					id: ele.id,
					repairId: ele.wbRepairApply && ele.wbRepairApply.id || null
				}
			}));
		}
		total.value = res.total;
		let {
			pageNum,
			pageSize
		} = pageInfo;
		if (pageNum >= total.value / pageSize) {
			isAllData.value = '2';
		} else {
			isAllData.value == '0';
		}
	}
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}


	function loadMore() {
		let {
			pageNum,
			pageSize
		} = pageInfo;
		if (pageNum >= total.value / pageSize) {
			isAllData.value = '2';
			return;
		}
		pageInfo.pageNum = pageNum++
		listChange();
	}

	//确认接单
	function affirmOrder(item, status) {
		if (status == 4) {
			uni.navigateTo({
				url: `/pages/fault/settleAccount?id=${item.repairId}&companyName=${item.ownerCompanyName}`
			})
			return;
		}
		updateMasterOrderStatus({
			id: item.repairId,
			status
		}).then(res => {
			activeName.value = status;
			clickTabItem({
				id: status
			})
			console.log(status, 'status', activeName.value);
			total.value = 0;
			Object.assign(pageInfo, {
				pageNum: 1,
				pageSize: 10
			})
			itemLists.value.splice(0, itemLists.value.length)
			listChange();
		})

	}

	function updateTime(item) {
		isShowTime.value = true;
		Object.assign(defalutRow, item)
	}

	function selectTimeConfirm(e) {
		let time = timestampToDate(e.value, 'ymdhm');
		// let time = '2024';
		updateMasterOrderStatus({
			id: defalutRow.repairId,
			newArriveTime: time
		}).then(res => {
			activeName.value = defalutRow.status;
			total.value = 0;
			Object.assign(pageInfo, {
				pageNum: 1,
				pageSize: 10
			})
			itemLists.value.splice(0, itemLists.value.length)
			isShowTime.value = false;
			listChange()
		})
	}

	//图片放大
	const itemSrc = ref(null)
	const isShowImage = ref(false)
	const idCardBack = ref([])
	const itemSrcFun = (url) => {
		itemSrc.value = url
		isShowImage.value = true
		console.log(1111, itemSrc.value);
	}
	const close = () => {
		isShowImage.value = false
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";
	/deep/.u-popup__content {
	    background-color: transparent;
	    position: relative;
	}

	.search {
		width: 100%;
		height: 100%;
		background: #F6F8FA;
		overflow: hidden;

		.searchInput {
			width: 100%;
			height: 88rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background-color: #fff;

			// position: fixed;
			// top: 0;
			// left: 0;
			padding: 0 20rpx;
			z-index: 99;

			.search-top {
				.inline_center();
				height: 88rpx;
				width: 100%;
				// display: flex;
				// align-items: center;

				.icon {
					width: 10vw;
					height: 88rpx;
					line-height: 88rpx;
					z-index: 1;
				}

				.title {
					width: 90vw;
					line-height: 88rpx;
					height: 88rpx;
					text-align: center;
					margin-left: -8vw;
					font-size: 34rpx;
					font-weight: 700;
				}
			}

			.search_icons {
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}
		}

		.search-placeholder {
			width: 100%;
			height: 60rpx;
			background-color: #cfd9f9;
			font-size: 28rpx;
			color: #325EF5;
			text-align: center;
			line-height: 60rpx;
		}

		.scroll-Y {
			padding: 0 28rpx 40rpx 28rpx;
			height: 95vh;

			.item {
				margin-top: 20rpx;
				height: 642rpx;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 20rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.item-top {
					.inline_space_between();

					& text:nth-child(2) {
						font-size: 30rpx;
						color: #28C445;
						font-weight: bold;
					}
				}

				.item-name,
				.item-type {
					font-size: 30rpx;
					color: #325EF5;
				}

				.item-time {
					.inline_space_between();

					text:nth-child(2) {
						color: #325EF5;
					}
				}

				.item-imgs {
					display: flex;

					image {
						width: 94rpx;
						height: 94rpx;
						margin-right: 16rpx;
					}
				}

				.item-btn {
					display: flex;
					justify-content: flex-end;

					button {
						margin: 0 20rpx;
						width: 240rpx;
						height: 64rpx;
						line-height: 64rpx;
						border-radius: 12rpx;
					}

					button:nth-child(1) {
						background-color: #fff;
						border: 1px solid #325ef5;
						color: #325ef5;
					}

					button:nth-child(2) {
						background-color: #325ef5;
						border: 1px solid #325ef5;
						color: #fff;
					}

					.change-ok {
						opacity: 0.5;
					}
				}

			}
		}

		.list-box {
			padding: 20rpx 30rpx;

			.list-item {
				background: #ffffff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				>view {
					margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;

					&:last-child {
						margin: 0;
						margin-top: 20rpx;
					}

					>text {
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 40rpx;

						&:nth-of-type(1) {
							opacity: 0.4;
						}

						&:nth-of-type(2) {
							color: #325ef5;
						}
					}

					.status {
						font-size: 28rpx;
						font-weight: 500;
					}
				}

				.title {
					display: block;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 40rpx;
					opacity: 0.9;
					margin-bottom: 10rpx;
					color: #325ef5;
				}

				.describe {
					display: flex;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 40rpx;
					opacity: 0.4;
					margin-bottom: 10rpx;
				}

				.imgs {
					view {
						image {
							width: 94rpx;
							height: 94rpx;
							background: #acacac;
							margin-right: 16rpx;

							&:last-child {
								margin: 0;
							}
						}
					}
				}

				.remark {
					padding: 15rpx 20rpx;
					background: #f6f8fa;
					border-radius: 16rpx;

					text {
						color: #325ef5;
						font-family: "PingFang SC";
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
						opacity: 1 !important;
					}
				}

				.submit {
					justify-content: flex-end;
					flex-wrap: wrap;

					button {
						border: 0;
						margin: 0;
						padding: 12rpx 20rpx;
						line-height: normal;
						font-size: 28rpx;
						font-family: "PingFang SC";
						font-style: normal;
						font-weight: 400;
						line-height: 40rpx;
						margin-left: 40rpx;
					}

					.cancel {
						border: 2rpx solid #325ef5;
						background: #ffffff;
						color: #325ef5;
					}

					.confirm {
						background: #325ef5;
						color: #ffffff;
					}
				}
			}
		}

		.uni-list {
			height: 80rpx;
		}
	}
</style>